<template>
	<view :data-theme="themeStyle" :style="{ background: bgColor, height: pageHeight }">		
			<!-- #ifdef H5 -->
			<view class="page-header">
				<ns-navbar
					:is-back="!1"
					title="首页"
					:background="bgNav"
					:title-color="!bgUrl && (!bgColor || bgColor == '#ffffff') ? '#000000' : '#ffffff'"
					:border-bottom="false"
					z-index="1001"
				></ns-navbar>
			</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
				<ns-navbar
					:is-back="!1"
					title="首页"
					:background="bgNav"
					:title-color="!bgUrl && (!bgColor || bgColor == '#ffffff') ? '#000000' : '#ffffff'"
					:border-bottom="false"
					z-index="1001"
				></ns-navbar>
				<view class="page-header"></view>
			<!-- #endif -->
			
			
			<diy-index-page :value="topIndexValue" :scrollHeight="scrollHeight" :scrollTopHeight="scrollTopHeight" :bgUrl="bgUrl" v-if="topIndexValue">
				<diy-group :diyData="diyData" :storeId="storeId" v-if="diyData.value" :height="scrollTopHeight"></diy-group>
			</diy-index-page>
			<scroll-view scroll-y="true" v-else :style="{height:scrollHeight}">
				<view class="bg-index" :style="'background:' + 'url('+img+') no-repeat 0 0/100%'">
					<diy-group :diyData="diyData" v-if="diyData.value" :storeId="storeId"></diy-group>
				</view>
			</scroll-view>
		<template v-if="popWindowBox && popWindowBox.controller == 'PopWindow'">
			<view @touchmove.prevent.stop>
				<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
					<view class="image-wrap"><image :src="popWindowBox.imageUrl" mode="widthFix" @click="redirectTo(popWindowBox.link)"></image></view>
					<text class="iconfont iconroundclose" @click="closeNum"></text>
				</uni-popup>
			</view>
		</template>
		 <!-- 分享客服 -->
		   <!-- <view v-if="sum==1" >
		    <view class="tan">
		      <button type="default" plain="true" class="t_img" open-type="share"><image class="img2" @click="share1()"src="https://img.yasuotu.com/uploads/2020/10/15/5f881607078b4_5f8816071cc7c.png?time=1602754056" ></image></button>
		      <view class="cuo" @click="cuo()">x</view>
		    </view>
		  </view> -->
		  <!-- <button type="none" class="share1"   @click="tank()" ><image class="imgs1" src="../../../static/sy/phone.png"></image></button> -->
		  <button type="none" class="share2" hover-class="none" open-type="contact" show-message-card="true" send-message-path=""><image class="imgs" src="../../../static/sy/kefu.png"></image></button>
		<!-- 底部tabBar -->
		<view class="tabBar-fill"></view>
		<view class="page-bottom"><diy-bottom-nav type="shop"></diy-bottom-nav></view>

		<loading-cover ref="loadingCover"></loading-cover>
		<ns-show-toast></ns-show-toast>
	</view>
</template>

<script>
import nsShowToast from '@/components/ns-show-toast/ns-show-toast.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import diyBottomNav from '@/components/diy-bottom-nav/diy-bottom-nav.vue';
import WxMap from 'common/js/map-wx-jssdk.js';
import diyLive from '@/components/diy-live/diy-live.vue';
import diyIndexPage from '@/components/diy-index-page/diy-index-page.vue';
import diyGroup from '@/components/diy-group/diy-group.vue';
import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
import { Weixin } from 'common/js/wx-jssdk.js';
import globalConfig from '@/common/js/golbalConfig.js';

export default {
	components: {
		uniPopup,
		diyBottomNav,
		nsShowToast,
		nsNavbar,
		diyIndexPage,
		diyGroup
	},
	data() {
		return {
			diyData: {},
			siteInfo: null,
			memberId: 0,
			id: 0,
			store: {}, //首页展示的门店详情
			storeId: 0, //首页展示的门店id

			latitude: null, // 纬度
			longitude: null, // 经度

			showStore: false,
			isIphoneX: false,

			pageHeight: '0',
			headerHeight: '0',
			bottomHeight: '0',
			popWindowBox: null,
			topIndexValue:null,
			img:'',
			sum:''
		};
	},
	//下拉刷新
	onPullDownRefresh() {
		this.getDiyInfo();
	},
	watch: {
		storeId() {
			this.$forceUpdate();
		}
	},
	onLoad(data) {
		
		
		uni.hideTabBar();
		this.isIphoneX = this.$util.uniappIsIPhoneX();
		if (data.source_member) uni.setStorageSync('source_member', data.source_member);
		// 小程序扫码进入
		if (data.scene) {
			var sceneParams = decodeURIComponent(data.scene);
			sceneParams = sceneParams.split('&');
			console.log(sceneParams,"首页")
			if (sceneParams.length) {
				sceneParams.forEach(item => {
					if (item.indexOf('source_member') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
				});
			}
		}
	},
	async onShow() {
		this.userType()
		this.store = uni.getStorageSync('store') ? uni.getStorageSync('store') : {};
		if (this.store) this.storeId = this.store.store_id;

		this.$langConfig.refresh();

		if (uni.getStorageSync('token')) {
			this.getMemberId();
		}
		this.getDefaultImg();
		// this.$refs.mescroll.refresh();
		this.getHeight();
		this.getDiyInfo();
	},
	mixins: [globalConfig],
	computed: {
		top() {
			let top = 0;
			// #ifndef h5
			top = this.isIphoneX ? 180 : 140;
			// #endif
			// #ifdef H5
			top = 90;
			// #endif
			return top;
		},
		bgColor() {
			let str = '';
			if (this.diyData && this.diyData.global) {
				str = this.diyData.global.bgColor;
			}
			return str;
		},
		bgUrl() {
			let str = '';
			if (this.diyData && this.diyData.global) {
				str = this.diyData.global.bgUrl;
			}
			return str;
		},
		bgNav() {
			if (this.bgUrl) {
				return { background: 'url(' + this.$util.img(this.bgUrl) + ') no-repeat 0 0/100%' };
			} else if (this.bgColor) {
				return { background: this.bgColor };
			} else {
				return { background: '#ffffff' };
			}
		},
		scrollHeight() {
			if (this.pageHeight != undefined && this.headerHeight != undefined && this.bottomHeight != undefined) {
				return 'calc(' + this.pageHeight + ' - ' + this.headerHeight + ' - ' + this.bottomHeight + ')';
			} else {
				return '100vh';
			}
		},
		scrollTopHeight() {
			if (this.pageHeight != undefined && this.headerHeight != undefined && this.bottomHeight != undefined) {
				return 'calc(' + this.pageHeight + ' - ' + this.headerHeight + ' - ' + this.bottomHeight + ' - 80rpx)';
			} else {
				return '100vh';
			}
		}
	},
	methods: {
		userType: function () {
					 this.$api.sendRequest({
					 	url: '/api/cart/getmemberinfo',
					 	success: res => {
							uni.setStorage({
								key: 'userType',
								data: res.logo,
								success: () => {
								}
							});
					 	}
					 });
							  
		               },
		
		 tank: function () {
			 this.$api.sendRequest({
			 	url: '/api/index/index',
			 	success: res => {
			 		uni.makePhoneCall({
			 			phoneNumber:res.data.phone //仅为示例
			 		});
			 	}
			 });
					  
		                },
		cuo:function(){
		  var e =this;
		  e.sum=''
		},
		share1:function(){
		  var e=this;
		 e.sum=''
		},
		//计算高度
		getHeight() {
			var self = this;
			//获取页面可用区域的高度
			uni.getSystemInfo({
				success: res => {
					this.pageHeight = res.windowHeight + 'px';
				}
			});
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.page-header')
					.boundingClientRect(data => {
						this.headerHeight = data.height + 'px';
					})
					.exec();
			});
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.page-bottom')
					.boundingClientRect(data => {
						// this.bottomHeight = data.height+'px';
						// console.log({bottomHeight:this.bottomHeight})
						this.bottomHeight = 55 + 'px';
					})
					.exec();
			});
		},
		getDiyInfo() {
			this.$api.sendRequest({
				url: '/api/diyview/info',
				data: {
					name: 'DIYVIEW_INDEX'
				},
				success: res => {
					if (res.code != 0 || !res.data) {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						this.diyData = {};
						return;
					}
					let IndexDatavalue = res.data;
					if (IndexDatavalue.value) {
						this.diyData = JSON.parse(IndexDatavalue.value);
						this.diyData.value[2].list=res.list
						
						this.diyData.value[7].list[0]=res.shouye_guanggao
						
						console.log(this.diyData)
						for (var i = 0; i < this.diyData.value.length; i++) {
							if (this.diyData.value[i].controller == 'TopCategory') {
								this.topIndexValue = this.diyData.value[i];
							}
							if (this.diyData.value[i].controller == 'PopWindow') {
								this.popWindowBox = this.diyData.value[i];
								this.popWindowBox.imageUrl = this.$util.img(this.popWindowBox.imageUrl);
								var PopWindowIndex = i;
								setTimeout(() => {
									if (uni.getStorageSync('index_wap_floating_layer') != null && uni.getStorageSync('index_wap_floating_layer') != '') {
										var wap_floating_cookie = JSON.parse(uni.getStorageSync('index_wap_floating_layer'));
										if (wap_floating_cookie.closeNum < Number(this.diyData.value[PopWindowIndex].showCount)) {
											this.$refs.uniPopupWindow.open();
										}
									} else {
										this.$refs.uniPopupWindow.open();
									}
								}, 500);
							}
						}
					}
					uni.stopPullDownRefresh();
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		closeNum() {
			this.$refs.uniPopupWindow.close();
			var closeNum = 1;
			if (uni.getStorageSync('index_wap_floating_layer')) {
				var wap_floating_cookie = JSON.parse(uni.getStorageSync('index_wap_floating_layer'));
				closeNum = ++wap_floating_cookie.closeNum;
			}
			uni.setStorageSync(
				'index_wap_floating_layer',
				JSON.stringify({
					closeNum
				})
			);
		},
		redirectTo(link) {
			this.$util.diyRedirectTo(link);
		},
		// 获取默认图
		getDefaultImg() {
			this.$api.sendRequest({
				url: '/api/config/defaultimg',
				success: res => {
					let data = res.data;
					if (res.code == 0 && data) {
						uni.setStorageSync('default_img', JSON.stringify(data));
					}
				}
			});
		},
		getMemberId() {
			this.$api.sendRequest({
				url: '/api/member/id',
				success: res => {
					if (res.code >= 0) {
						this.memberId = res.data;
					}
				}
			});
		},
		onShareAppMessage(res) {
			console.log(res)
			var title = 'U+商城';
			if (this.siteInfo) title = this.siteInfo.site_name;
			var path = '/pages/index/index/index';
			if (this.memberId) path += '?source_member=' + this.memberId;
			return {
				title: title,
				path: path,
				success: res => {},
				fail: res => {}
			};
		},
		// #ifdef MP-WEIXIN
		// 分享到微信朋友圈
		onShareTimeline(){
			let query = '';
			if (this.memberId) query = 'source_member=' + this.memberId;
			return {
				title: '',
				query: query,
				imageUrl: ''
			} 
		}
		// #endif
	},
	onReady() {
		// 微信公众号分享
		// #ifdef H5
		if (this.$util.isWeiXin()) {
			this.$api.sendRequest({
				url: '/wechat/api/wechat/share',
				data: {
					url: window.location.href
				},
				success: res => {
					if (res.code == 0) {
						var wxJS = new Weixin();
						wxJS.init(res.data.jssdk_config);

						let shareConfig = res.data.share_config,
							url = this.$config.h5Domain + '/pages/index/index/index';
						if (this.memberId) url += '?source_member=' + this.memberId;

						wxJS.setShareData({
							title: shareConfig.shop_param_1 + shareConfig.site_name,
							desc: shareConfig.shop_param_2 + '\r\n' + shareConfig.shop_param_3 + '\r\n' + '收藏热度：★★★★★',
							link: url,
							imgUrl: this.$util.img(shareConfig.site_logo)
						});
					}
				}
			});
		}
		// #endif
	}
};
</script>

<style lang="scss">
.diy-wrap {
	/* #ifdef H5 */
	height: calc(100vh - 44px);
	/* #endif */
	/* #ifdef MP-WEIXIN */
	height: 100vh;
	/* #endif */
}

.bg-index{
	width: 100%;
	height: 100%;
}
.index_bg {
	width: 100%;
	height: 100%;
}

.head-nav {
	width: 100%;
	height: var(--status-bar-height);
}

.head-nav.active {
	padding-top: 40rpx;
}

.head-return {
	padding-left: 30rpx;
	padding-right: 30rpx;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	color: #fff;
	font-weight: 600;
	font-size: $ns-font-size-x-lg;

	text {
		display: inline-block;
		margin-right: 10rpx;
	}
}

.wap-floating {
	.image-wrap {
		width: 480rpx;

		image {
			width: 100%;
			border-radius: 40rpx;
		}
	}

	text {
		display: block;
		font-size: 60rpx;
		color: #ffffff;
		text-align: center;
	}
}

::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}

.popup-box {
	width: 450rpx;
	background: #ffffff;
	border-radius: $ns-border-radius;
	overflow: hidden;

	.close_title {
		width: 100%;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		font-size: $ns-font-size-lg;
	}

	.close_content {
		width: 100%;
		max-height: 500rpx;
		padding: $ns-padding;
		box-sizing: border-box;
	}

	.close_content_box {
		width: 100%;
		max-height: 460rpx;
		line-height: 1.3;
	}
}

// .noStore-bg {
// 	background: #ffffff !important;
// }

.noStore-text {
	color: #000000 !important;
}

.isStore-top {
	margin-bottom: 10rpx;
}

.tabBar-fill{
	height: 56px;
}
</style>

<style scoped>
.wap-floating >>> .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
	background: none !important;
}

/* .noStore-bg /deep/ .search-box {
	background: #ffffff;
}

.noStore-bg /deep/ .single-graph {
	background: #ffffff;
} */
/deep/ .placeholder {
	height: 0;
}
.tan{
  width: 100%;
  height: 100%;
  background-color:rgba(51,51,63,0.6);
  position:fixed;
  top:150rpx;
  right: 0;
  left: 0;
  bottom: 200rpx;
  z-index: 1000;
}
.t_img{
  width: 500rpx;
  height: 800rpx;
  border: none;
  padding: 0;
  margin:20rpx auto;
}
button[plain]{ border:0 }
.img2{
  width: 100%;
  height: 100%;
}
.cuo{
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  margin: 0 auto;
  border: #333 solid 1rpx;
  line-height: 50rpx;
  text-align: center;
}
.share1{
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  position: fixed;
  bottom: 330rpx;
  right: 0rpx;
  border: #f1f1f1 solid 1rpx;
}
.share2{
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  position: fixed;
  bottom: 180rpx;
  right: 0rpx;
  border: #f1f1f1 solid 1rpx;
}
.imgs{
  padding-top:25rpx ;
  width:100%;
  height: 60%;
}
.imgs1{
  padding-top:30rpx ;
  width:100%;
  height: 50%;
}
</style>